<template>
  <div class="document-center-container">
    <div class="header">
      <p>学习中心</p>
    </div>
    <div class="main">
      <div class="main-container">
        <mdView :mdurl="mdurl" />
      </div>
    </div>
    <div class="slider">
      <div class="go-back" @click="router.push('/home')">
        <div class="goback-container">
          <img src="./img/goback.png" alt="" />
        </div>
        <span>返回</span>
      </div>
      <el-scrollbar>
        <el-menu background-color="#fff" text-color="#555" active-text-color="#187EE6" default-active="1-1">
          <el-sub-menu index="1">
            <template #title>
              <el-icon style="font-size: 17px;">
                <component is="Monitor"></component>
              </el-icon>
              <span style="font-size: 17px;">日常学习</span>
            </template>
            <el-menu-item index="1-1" @click="toggleMain">
              <template #title>
                <el-icon style="font-size: 15px;">
                  <component is="Monitor"></component>
                </el-icon>
                <span style="font-size: 15px;">管理内容</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-2" @click="toggleMain">
              <template #title>
                <el-icon style="font-size: 15px;">
                  <component is="Monitor"></component>
                </el-icon>
                <span style="font-size: 15px;">训练计划</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon style="font-size: 17px;">
                <component is="Monitor"></component>
              </el-icon>
              <span style="font-size: 17px;">技术文档</span>
            </template>
            <el-menu-item index="2-1" @click="toggleMain">
              <template #title>
                <el-icon style="font-size: 15px;">
                  <component is="Monitor"></component>
                </el-icon>
                <span style="font-size: 15px;">推送内容</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const md = ref({
  '1-1': 'application',
  '1-2': 'dedication',
  '2-1': 'androidpush',
})

let mdurl = ref<string>(md.value['1-1'])

const toggleMain = (vc: any) => {
  mdurl.value = md.value[vc.index]
}
</script>

<style lang="scss" scope>
.document-center-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/imgs/new-bg.jpg);
  background-size: cover;
  opacity: 0.8;
  box-sizing: border-box;
  overflow: hidden;

  .slider {
    width: 250px;
    height: 100%;
    background: #fff;
    opacity: 0.8;

    .go-back {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-image: linear-gradient(to left, #f8d852, #29304b);
      ;
      opacity: 0.85;
      cursor: pointer;
      color: #fff;

      .goback-container {
        margin-left: 15px;
        display: inline-block;
        width: 22px;
        height: 22px;

        img {
          width: 100%;
          height: auto;
          vertical-align: middle;
        }
      }
    }
  }

  .header {
    position: fixed;
    width: calc(100vw - 250px);
    height: 60px;
    top: 0;
    left: 250px;
    background-image: linear-gradient(to right, #f8d447, #364276);
    opacity: 0.85;
    font-size: 18px;
    color: #ffffff;

    p {
      position: absolute;
      font-size: 23px;
      font-weight: 700;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%);
    }
  }

  .main {
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    padding: 20px;
    width: calc(100vw - 250px);
    height: calc(100vh - 50px);
    top: 60px;
    left: 250px;
    position: absolute;
    background-color: #f1f1f1;

    .main-container {
      overflow-y: scroll;
      width: 100%;
      height: 100%;
      border-radius: 6px;

      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }

  .md-editor-catalog {
    background-color: #fff;
  }
}
</style>